<!-- 群众帮代办 -->
<template>
  <div class="container">
      <div class="header">
        <!-- 事项清单公开 -->
        <img class="box" style="margin-right: 10px;" @click="toPage('pages/tuanOnline/masses/itemOpen')" src="https://tuanfeng.whkxzj.com/profile/static/20231122184429-事项清单公开.png" />
        <!-- 团队风采 -->
        <img class="box" @click="toPage('pages/tuanOnline/team/index')" src="https://tuanfeng.whkxzj.com/profile/static/20231122184509-团队风采.png" />
      </div>
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <img src="../../../assets/img/line.png" alt />
            <span>事项办理入口</span>
          </div>
          <div class="card-more" @click="toPage('pages/tuanOnline/masses/transactMore')">
            <span style="margin-right: 3px; color: #0c92ff;">查看更多</span>
            <u-icon color="#0c92ff" name="arrow-right"></u-icon>
          </div>
        </div>
        <div v-if="tuanItemList.length" class="card-list">
          <template v-for="(item, index) in tuanItemList">
            <div class="card-item" @click="toMasses('pages/masses', item)" :key="index">
              <div class="card-content">{{item.title}}</div>
              <div class="card-time">{{item.publishTimeStr}}</div>
            </div>
          </template>
        </div>
        <div v-else class="list-empty">暂无内容</div>
      </div>
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <img src="../../../assets/img/line.png" alt />
            <span>已办事项公开</span>
          </div>
          <div class="card-more" @click="toPage('pages/tuanOnline/masses/transactItemMore')">
            <span style="margin-right: 3px; color: #0c92ff;">查看更多</span>
            <u-icon color="#0c92ff" name="arrow-right"></u-icon>
          </div>
        </div>
        <div v-if="transactItemListLimit.length" class="card-list">
          <template v-for="(item, index) in transactItemListLimit">
            <div v-if="index < 5" class="card-item" @click="toPage('pages/tuanOnline/masses/transactItemDetail', {id: item.id})" :key="index">
              <div class="card-content">{{item.content}}</div>
              <div class="card-time" style="display: flex; justify-content: space-between;">
                <div>申请时间：{{item.createDate}}</div>
                <div style="color: #67C23A;">已办结</div>
              </div>
            </div>
          </template>
        </div>
        <div v-else class="list-empty">暂无内容</div>
      </div>
  </div>
</template>
<script>
import Empty from "../../../components/Empty.vue";
import { getTuanItemListLimitAPI } from "../../../api/tuan";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  components: { Empty },
  data() {
      return {
          index: 0,
          loading: false,
          tuanItemList: [],
          transactItemListLimit: [],
      };
  },
  computed: {
    ...mapState(["openId"]),
  },
  onShareAppMessage() {},
  onShow() {
      this.loading = true;
      wx.showLoading({
          title: "加载中...",
      });
      getTuanItemListLimitAPI().then((res) => {
        this.tuanItemList = res.data.itemListLimit;
        this.transactItemListLimit = res.data.transactItemListLimit;
        wx.hideLoading();
        this.loading = false;
      });
  },
  methods: {
      ...mapMutations(["setData"]),
      ...mapActions(["getOpenId"]),
      toPage(url, params) {
          this.$u.route({ url, params });
      },
      toMasses(url, item) {
        if (!this.openId) {
          this.getOpenId().then((res) => {
            let params = {
              id: item.id,
              title: item.title,
              materialFilePath: item.filePath,
              openId: this.openId
            }
            this.toPage(url, params);
          })
        } else {
          let params = {
            id: item.id,
            title: item.title,
            materialFilePath: item.filePath,
            openId: this.openId
          }
          this.toPage(url, params);
        }
      },
  },
};
</script>
<style scoped lang="scss">
@import "../../../assets/scss/common.scss";

.container {
    min-height: 100vh;
    background-color: #fafafa;
    box-sizing: border-box;
    padding: 15px;
    .header {
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        margin-bottom: 15px;
        background-color: #fff;
        .box {
            width: 45vw;
            height: 27vw;
        }
    }
    .grids {
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        background-color: #fff;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
        .grids-title {
            padding: 15px 15px 8px;
            border-bottom: 1px solid #efefef;
            font-size: 18px;
            font-weight: bold;
        }
        .grids-content {
            display: flex;
            flex-wrap: wrap;
            padding: 15px;
            .grid {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .icon {
                    width: 50px;
                    height: 50px;
                    margin-bottom: 5px;
                }
                .text {
                    text-align: center;
                    font-size: 13px;
                }
            }
        }
    }
    .card {
        padding: 15px 0;
        border-radius: 8px;
        background-color: #fff;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
        .card-header {
            padding: 0 15px 8px;
            border-bottom: 1px solid #efefef;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .card-title {
                font-size: 18px;
                font-weight: bold;
                display: flex;
                align-items: center;
                img {
                    width: 5px;
                    height: 18px;
                    margin-right: 10px;
                }
            }
            .card-more {
                color: $color_regular-text;
                font-size: 12px;
            }
        }
        .card-list {
            padding: 0 15px;
            .card-item {
                border-bottom: 1px solid #efefef;
                padding-bottom: 10px;
                margin-bottom: 10px;
                &:last-child {
                    padding: 0;
                    margin: 0;
                    border: none;
                }
                .card-content {
                    font-size: 15px;
                    line-height: 22px;
                    margin-bottom: 3px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    color: #0c92ff;
                }
                .card-time {
                    padding-right: 5px;
                    font-size: 13px;
                    color: $color_secondary-text;
                }
            }
        }
        .list-empty {
            text-align: left;
            padding: 10px 0 10px 20px;
            font-size: 14px;
            color: $color_secondary-text;
        }
        .card-tip {
            padding: 0 15px;
            font-size: 14px;
            line-height: 22px;
        }
    }
}
</style>
